<template>
	<view class="wrap">
		<view class="skill-label-main">
			<view class="item" v-for="(item, index) in skillData" :key='index'>
				<text class="number-box">{{item.index}}.</text>
				<input placeholder="添加您的技能标签..." maxlength="8" v-model="item.value"></input>
				<view class="num"><text>{{item.value.length || 0}}</text>/8</view>
			</view>
		</view>
		<btnTpl @confirmEvent="checkThreeLevelFn">保存</btnTpl>
	</view>
</template>

<script>
	import btnTpl from '../../components/recruit/btn-tpl.vue'

	export default {
		data() {
			return {
				skillData: [{
					index: 1,
					value: ""
				}, {
					index: 2,
					value: ""
				}, {
					index: 3,
					value: ""
				}]
			}
		},
		onLoad(options) {
			const skillData = uni.getStorageSync('skillData')
			skillData.length && (this.skillData = skillData)
		},
		components: {
			btnTpl
		},
		onUnload() {
			uni.removeStorageSync('skillData')
		},
		methods: {
			checkThreeLevelFn() {
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2]; //-2为上一级页面  

				prevPage.$vm.skillData = this.skillData.filter(item => item.value)

				uni.navigateBack({
					delta: 1 // delta: 1返回上一级（A 页面）    delta: 2返回上两级
				})
			},
		}
	}
</script>

<style lang="less">
	.skill-label-main {
		padding: 0 30rpx;

		.item {
			height: 30rpx;
			padding: 59rpx 10rpx 30rpx;
			box-shadow: 0 1rpx 0.5rpx -1rpx #CCCCCC;
			line-height: 30rpx;

			input {
				width: 80%;
				display: inline-block;
				height: 30rpx;
				font-size: 30rpx;
			}

			.num {
				font-size: 20rpx;
				color: #999;
				float: right;
				margin-top: 20rpx;

				text {
					color: #E41805;
				}
			}
		}

		.number-box {
			display: inline-block;
			vertical-align: top;
			padding: 0 15rpx 0 0;
			line-height: 1.4rem;
			color: #C7BEBE;
		}
	}
</style>
